/**
 * Loyal Ladies Portal - Modern Pages Theme
 * Phase 3: Profile Pages, Member Lists, Tables
 * Version: 1.0.0
 */

/* ============================================
   PAGE TITLE SECTION
   ============================================ */
.page-title {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  margin-bottom: 15px;
  box-shadow: var(--shadow);
}

.page-title .title_left {
  margin-bottom: 10px;
}

.page-title .title_left h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}

.page-title .title_left h3 small {
  font-size: 0.95rem;
  color: var(--gray-500);
  font-weight: 500;
}

.page-title .title_left h3 small a {
  color: var(--primary);
  text-decoration: none;
  margin-right: 8px;
}

.page-title .title_left h3 small a:hover {
  text-decoration: underline;
}

.page-title .title_right {
  margin-top: 0;
}

/* Ensure title_right columns stack properly */
.page-title .title_right .col-md-4 {
  margin-bottom: 10px;
}

.page-title .title_right .col-md-4:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .page-title .title_left {
    margin-bottom: 0;
  }
  
  .page-title .title_right .col-md-4 {
    margin-bottom: 0;
  }
}

/* Search Box in Page Title */
.top_search .input-group {
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  overflow: hidden;
}

.top_search .form-control {
  border: 1px solid var(--gray-200) !important;
  border-right: none !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  padding: 10px 15px;
  font-size: 1rem;
}

.top_search .form-control:focus {
  border-color: var(--primary) !important;
}

.top_search .btn-default {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--white) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 1rem;
}

.top_search .btn-default:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* Select dropdown styling */
.page-title select.form-control,
.title_right select.form-control {
  height: auto;
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: var(--radius) !important;
}

/* ============================================
   PROFILE PAGE - LEFT COLUMN
   ============================================ */
.profile_left {
  text-align: center;
  padding: 15px !important;
  border-right: 1px solid var(--gray-200);
}

.profile_left .profile_img {
  margin-bottom: 12px;
}

/* Square image with rounded corners - not circular */
.profile_left .profile_img img,
.profile_left .avatar-view {
  *width: 150px !important;
  *height: 150px !important;
  border-radius: var(--radius-lg) !important;
  object-fit: cover;
  border: 3px solid var(--primary) !important;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
  display: block;
}

.profile_left h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 10px 0 15px;
}

.profile_left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.profile_left .admin-info-btn {
  margin-top: 15px;
}

.profile_left .admin-info-btn .btn {
  margin: 4px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* Like Button Styling */
.like-button,
#like-button {
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 10px;
  margin: 10px 0;
}

.like-button .fa-heart,
.like-button .fa-thumbs-up {
  color: var(--danger);
  font-size: 1.2rem;
}

/* ============================================
   PROFILE PAGE - TABS
   ============================================ */
.tab-wrapper {
  margin-bottom: 15px;
  background: var(--gray-100) !important;
  border-radius: var(--radius-md) !important;
  padding: 5px !important;
}

#myTab.nav-tabs,
.nav-tabs.bar_tabs {
  border-bottom: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
}

#myTab.nav-tabs::-webkit-scrollbar,
.nav-tabs.bar_tabs::-webkit-scrollbar {
  display: none;
}

#myTab.nav-tabs > li,
.nav-tabs.bar_tabs > li {
  flex-shrink: 0;
  margin: 0 !important;
  float: none !important;
}

#myTab.nav-tabs > li > a,
.nav-tabs.bar_tabs > li > a {
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--gray-600) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  transition: all var(--transition) !important;
  white-space: nowrap;
  margin: 0 !important;
}

#myTab.nav-tabs > li > a:hover,
.nav-tabs.bar_tabs > li > a:hover {
  color: var(--primary) !important;
  background: var(--white) !important;
  border: none !important;
}

#myTab.nav-tabs > li.active > a,
#myTab.nav-tabs > li.active > a:hover,
#myTab.nav-tabs > li.active > a:focus,
.nav-tabs.bar_tabs > li.active > a,
.nav-tabs.bar_tabs > li.active > a:hover,
.nav-tabs.bar_tabs > li.active > a:focus {
  color: var(--white) !important;
  background: var(--primary) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}

.tab-content {
  padding: 15px 0;
}

.tab-content > .tab-pane {
  padding: 0;
}

/* ============================================
   PROFILE PAGE - CONTACT INFORMATION
   ============================================ */
.contact-information {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 15px;
}

.contact-information h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-700);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

/* All row containers */
.contact-information > div,
.contact-information .phone-content,
.contact-information .email-content,
.contact-information .address-content,
.contact-information .birthday-content,
.contact-information .gender-content,
.contact-information .skype-profession,
.contact-information .user_data {
  *display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-200);
  margin: 0;
}

.contact-information > div:last-child {
  border-bottom: none;
}

/* Labels */
.contact-information .contact-title {
  flex: 0 0 180px;
  font-weight: 700;
  color: var(--gray-600);
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

/* Values - target all possible span classes */
.contact-information span:not(.contact-title):not(.btn):not(.label),
.contact-information .phone-number,
.contact-information .birth-date,
.contact-information .mail-address,
.contact-information .contact-email,
.contact-information .gender,
.contact-information .contact-profession,
.contact-information .social {
  flex: 1;
  color: var(--gray-800);
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.contact-information a {
  color: var(--primary);
  text-decoration: none;
  font-size: 1rem;
}

.contact-information a:hover {
  text-decoration: underline;
}

/* Social Media Icons */
.contact-information .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  margin-right: 8px;
  font-size: 1.1rem;
  transition: all var(--transition);
}

.contact-information .social a.facebook {
  background: #1877f2;
  color: var(--white);
}

.contact-information .social a.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: var(--white);
}

.contact-information .social a.twitter {
  background: #1da1f2;
  color: var(--white);
}

.contact-information .social a.tiktok {
  background: var(--gray-900);
  padding: 5px;
}

.contact-information .social a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Language Tags */
.contact-information .btn-info.btn-xs {
  background: var(--info) !important;
  border: none;
  padding: 5px 12px;
  font-size: 0.85rem;
  margin: 2px;
  border-radius: var(--radius-full);
}

@media (max-width: 767px) {
  .profile_left {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  
  /* Fix mobile contact information */
  .contact-information {
    padding: 12px !important;
  }
  
  .contact-information > div,
  .contact-information .phone-content,
  .contact-information .email-content,
  .contact-information .address-content,
  .contact-information .birthday-content,
  .contact-information .gender-content,
  .contact-information .skype-profession,
  .contact-information .user_data {
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
  }
  
  .contact-information .contact-title {
    display: block !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    font-size: 1rem !important;
    color: var(--gray-500) !important;
  }
  
  .contact-information span:not(.contact-title):not(.btn):not(.label),
  .contact-information .phone-number,
  .contact-information .birth-date,
  .contact-information .mail-address,
  .contact-information .contact-email,
  .contact-information .gender,
  .contact-information .contact-profession {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    color: var(--gray-800) !important;
  }
  
  /* Tabs on mobile */
  .tab-wrapper {
    padding: 4px !important;
  }
  
  #myTab.nav-tabs > li > a,
  .nav-tabs.bar_tabs > li > a {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
}

/* ============================================
   MEMBER GRID VIEW - PROFILE CARDS
   ============================================ */
.profile_details {
  margin-bottom: 15px;
}

.profile_details .well.profile_view {
  background: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow);
  padding: 0 !important;
  overflow: hidden;
  transition: all var(--transition);
}

.profile_details .well.profile_view:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.profile_details .profile_view > .col-sm-12 {
  padding: 12px;
}

.profile_details .profile_view h4.brief {
  *font-size: 0.9rem;
  color: var(--gray-500);
  font-style: italic;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.profile_details .profile_view .left h4.member-name {
  *font-size: 1.1rem;
  color: var(--gray-800);
  margin: 0 0 8px;
}

.profile_details .profile_view .left p {
  font-size: 0.95rem;
  color: var(--gray-600);
  margin-bottom: 8px;
  line-height: 1.5;
}

.profile_details .profile_view .left ul {
  margin: 0;
  padding: 0;
}

.profile_details .profile_view .left ul li {
  font-size: 0.95rem;
  color: var(--gray-600);
  padding: 3px 0;
  line-height: 1.5;
}

.profile_details .profile_view .left ul li b {
  color: var(--gray-700);
  font-weight: 600;
}

.profile_details .profile_view .right img {
  *width: 80px !important;
  *height: 80px !important;
  border-radius: var(--radius-full) !important;
  object-fit: cover;
  border: 2px solid var(--primary-light);
  transition: all var(--transition);
}

.profile_details .profile_view:hover .right img {
  border-color: var(--primary);
}

.profile_details .profile_view .bottom {
  background: var(--gray-50);
  padding: 10px 12px;
  border-top: 1px solid var(--gray-100);
}

.profile_details .profile_view .bottom .emphasis {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile_details .profile_view .bottom .btn {
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* ============================================
   DATA TABLES STYLING
   ============================================ */
.dataTables_wrapper {
  padding: 15px 0;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius) !important;
  padding: 8px 12px;
  margin-left: 10px;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--gray-300) !important;
  border-radius: var(--radius) !important;
  padding: 6px 10px;
}

/* DataTable Buttons */
.dt-buttons {
  margin-bottom: 15px;
}

.dt-buttons .btn {
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  border-radius: var(--radius) !important;
  margin-right: 5px;
  padding: 8px 15px;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.dt-buttons .btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

/* Table Styling */
.table.dataTable {
  border-collapse: collapse !important;
}

.table.dataTable thead th {
  background: var(--gray-100) !important;
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--gray-300) !important;
  white-space: nowrap;
}

.table.dataTable tbody td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  *font-size: 1rem;
  border-top: 1px solid var(--gray-100) !important;
  color: var(--gray-700);
}

.table.dataTable tbody tr:hover {
  background: var(--primary-light) !important;
}

/* User image in table */
.table .user-img img {
  width: 45px !important;
  height: 45px !important;
  border-radius: var(--radius-full) !important;
  object-fit: cover;
  border: 2px solid var(--gray-200);
  transition: all var(--transition);
}

.table tbody tr:hover .user-img img {
  border-color: var(--primary);
}

/* Table links */
.table tbody td a {
  color: var(--gray-800);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.table tbody td a:hover {
  color: var(--primary);
}

/* Table striping */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--gray-50);
}

.table-striped > tbody > tr:nth-of-type(odd):hover {
  background-color: var(--primary-light) !important;
}

/* ============================================
   PAGINATION - Fixed to stay at bottom center
   ============================================ */
.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
  margin: 12px 0 !important;
  gap: 4px;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
}

/* Ensure pagination container is full width */
.x_panel .pagination,
.x_content .pagination,
nav .pagination {
  width: 100% !important;
  text-align: center !important;
}

.pagination > li {
  display: inline-block !important;
  float: none !important;
}

.pagination > li > a,
.pagination > li > span {
  border: none !important;
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all var(--transition);
  display: inline-block !important;
  min-width: 36px;
  text-align: center;
}

.pagination > li > a:hover {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--primary) !important;
  color: var(--white) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  background: var(--gray-50) !important;
  color: var(--gray-400) !important;
  cursor: not-allowed;
}

/* Mobile pagination */
@media (max-width: 767px) {
  .pagination {
    padding: 10px 0 !important;
  }
  
  .pagination > li > a,
  .pagination > li > span {
    padding: 6px 10px !important;
    font-size: 0.8rem;
    min-width: 32px;
  }
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 18px 25px;
}

.modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-800);
}

.modal-header .close {
  font-size: 1.5rem;
  color: var(--gray-500);
  opacity: 1;
  transition: all var(--transition);
}

.modal-header .close:hover {
  color: var(--danger);
}

.modal-body {
  padding: 25px;
}

.modal-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200) !important;
  padding: 15px 25px;
}

/* ============================================
   NOTES / COMMENTS SECTION
   ============================================ */
.notes-list,
.comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notes-list li,
.comments-list li {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid var(--primary);
}

.notes-list li:hover,
.comments-list li:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   ACTIVITIES SECTION
   ============================================ */
.activities-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activities-list li {
  display: flex;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--gray-100);
}

.activities-list li:last-child {
  border-bottom: none;
}

.activities-list .activity-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.activities-list .activity-icon i {
  color: var(--primary);
}

.activities-list .activity-content {
  flex: 1;
}

.activities-list .activity-time {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* ============================================
   REFERRALS TABLE
   ============================================ */
#referrals .table {
  margin-top: 15px;
}

#referrals .btn-success,
#referrals .btn-danger,
#referrals .btn-info,
#referrals .btn-warning,
#referrals .btn-primary {
  padding: 5px 12px;
  font-size: 0.8rem;
  border-radius: var(--radius-full);
}

/* ============================================
   DELETE PROFILE TAB
   ============================================ */
#deleteprofile {
  padding: 30px;
  text-align: center;
}

#deleteprofile .btn-danger {
  padding: 12px 30px;
  font-size: 1rem;
}

/* ============================================
   NO RESULTS FOUND
   ============================================ */
.no-found {
  padding: 50px 20px;
  color: var(--gray-500);
  font-weight: 500;
}

/* ============================================
   DATE RANGE PICKER STYLING
   ============================================ */
.daterangepicker {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--primary) !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--primary) !important;
}

.daterangepicker .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 991px) {
  .page-title {
    padding: 15px 20px;
    display: block !important;
  }
  
  .page-title .title_left {
    margin-bottom: 15px;
  }
  
  .page-title .title_left h3 {
    font-size: 1.4rem;
  }
  
  .page-title .title_right {
    width: 100%;
  }
  
  .page-title .title_right .col-md-4 {
    width: 100% !important;
    float: none !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
  }
  
  .contact-information {
    padding: 20px;
  }
  
  .contact-information .contact-title {
    flex: 0 0 160px;
  }
}

@media (max-width: 767px) {
  .page-title .title_right .col-md-4 {
    margin-bottom: 10px;
  }
  
  .table.dataTable thead th,
  .table.dataTable tbody td {
    padding: 10px 12px !important;
    font-size: 0.95rem;
  }
  
  .profile_details .profile_view .right img {
    *width: 70px !important;
    *height: 70px !important;
  }
  
  .profile_details .profile_view .left h4.member-name {
    *font-size: 1.1rem;
  }
  
  .profile_details .profile_view .left ul li,
  .profile_details .profile_view .left p {
    font-size: 0.95rem;
  }
  
  /* Ensure profile cards stack properly */
  .profile_details {
    width: 100% !important;
    float: none !important;
  }
}