/**
 * custom.css
 * Custom styles for Lin Packaging CRM
 * Extracted from Index.html and Page_ProspectList.html
 */

/* ============================================
   LAYOUT
   ============================================ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.app-wrapper {
  min-height: 100vh;
}

/* ============================================
   LOADING & SKELETON STATES
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--bs-border-radius);
}

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

.skeleton-row {
  height: 40px;
  margin-bottom: 4px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--bs-secondary-color);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.empty-state h5 {
  font-size: 1rem;
}

.empty-state p {
  font-size: 0.875rem;
}

/* ============================================
   TABLE CARD
   ============================================ */
.card-table {
  margin-bottom: 0;
}

.card-table .card-body {
  padding: 0;
}

/* ============================================
   FIXED COLUMN WIDTHS - Prevent layout shift
   ============================================ */
.table-prospects {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.table-prospects th,
.table-prospects td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.table-prospects th {
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Column widths */
.table-prospects .col-business { width: 18%; }
.table-prospects .col-contact-person { width: 15%; }
.table-prospects .col-contact { width: 70px; }
.table-prospects .col-source { width: 90px; }
.table-prospects .col-status { width: 90px; }
.table-prospects .col-last-activity { width: 100px; }
.table-prospects .col-followup { width: 110px; }
.table-prospects .col-actions { width: 100px; }

.table-prospects td.col-business,
.table-prospects td.col-contact-person {
  text-align: left;
}

.table-prospects td.col-contact,
.table-prospects td.col-source,
.table-prospects td.col-status,
.table-prospects td.col-last-activity,
.table-prospects td.col-followup,
.table-prospects td.col-actions {
  text-align: center;
}

.table-prospects td {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.table-prospects .business-name {
  font-weight: 600;
  color: var(--bs-body-color);
}

.table-prospects .business-name:hover {
  color: var(--bs-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================
   CONTACT ICONS COLUMN
   ============================================ */
.contact-icons {
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
}

.table-prospects td.col-contact {
  text-align: center;
  vertical-align: middle;
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s ease;
}

.btn-icon i {
  font-size: 0.875rem;
}

.btn-whatsapp { color: #25D366; }
.btn-whatsapp:hover { background-color: #25D366; color: white; }

.btn-social-instagram { color: #E4405F; }
.btn-social-instagram:hover { background-color: #E4405F; color: white; }

.btn-social-linkedin { color: #0A66C2; }
.btn-social-linkedin:hover { background-color: #0A66C2; color: white; }

.btn-social-tiktok { color: #000000; }
.btn-social-tiktok:hover { background-color: #000000; color: white; }
[data-bs-theme="dark"] .btn-social-tiktok { color: #ffffff; }
[data-bs-theme="dark"] .btn-social-tiktok:hover { background-color: #ffffff; color: #000000; }

.btn-social-facebook { color: #1877F2; }
.btn-social-facebook:hover { background-color: #1877F2; color: white; }

.btn-social-twitter { color: #1DA1F2; }
.btn-social-twitter:hover { background-color: #1DA1F2; color: white; }

.btn-social-link { color: var(--bs-secondary); }
.btn-social-link:hover { background-color: var(--bs-secondary); color: white; }

/* ============================================
   STATUS BADGES
   ============================================ */
.badge-status-new { background-color: var(--bs-info) !important; }
.badge-status-contacted { background-color: var(--bs-primary) !important; }
.badge-status-nurturing { background-color: var(--bs-warning) !important; color: var(--bs-dark) !important; }
.badge-status-icebox { background-color: var(--bs-secondary) !important; }
.badge-status-dead { background-color: var(--bs-danger) !important; }
.badge-status-converted { background-color: var(--bs-success) !important; }

.badge-source {
  font-weight: normal;
  font-size: 0.7rem;
}

/* ============================================
   OVERDUE INDICATOR
   ============================================ */
.text-overdue {
  color: var(--bs-danger) !important;
  font-weight: 600;
}

/* ============================================
   ACTIONS COLUMN
   ============================================ */
.table-prospects td.col-actions {
  text-align: center;
  vertical-align: middle;
}

.action-buttons {
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
}

.btn-action-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius);
  font-size: 1rem;
  line-height: 1;
}

.btn-action-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ACTIVITY TIMELINE (Drawer)
   ============================================ */
.activity-item {
  position: relative;
  padding-left: 1.25rem;
  padding-bottom: 1rem;
  border-left: 2px solid var(--bs-border-color);
  margin-left: 0.25rem;
}

.activity-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.activity-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-primary);
}

.activity-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}

.activity-note {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
}

.activity-author {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* ============================================
   MODAL IMPROVEMENTS
   ============================================ */
.modal-backdrop + .modal-backdrop {
  z-index: 1055;
}

/* ============================================
   MISC
   ============================================ */
.btn-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}