/* ===== Host Dashboard ===== */

.host-dashboard {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--spacing-8) var(--container-padding);
}

.host-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-8);
}

.host-dashboard__subtitle {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-4);
}

.host-dashboard__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

/* Stats Cards */
.host-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}

.host-stats__card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
  text-align: center;
}

.host-stats__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-1);
}

.host-stats__label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Tabs */
.host-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--spacing-8);
}

.host-tabs__btn {
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.host-tabs__btn:hover {
  color: var(--color-primary);
}

.host-tabs__btn.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.host-tab-panel {
  display: none;
}

.host-tab-panel.is-active {
  display: block;
}

/* Booking Table */
.host-booking-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
}

.host-booking-table th,
.host-booking-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.host-booking-table th {
  background: var(--color-bg-light);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.host-booking-table td {
  font-size: var(--text-base);
}

.host-booking-table tbody tr:hover {
  background: var(--color-bg-light);
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.status-badge--pending { background: var(--color-status-pending-bg); color: var(--color-status-pending-text); }
.status-badge--confirmed { background: var(--color-status-confirmed-bg); color: var(--color-status-confirmed-text); }
.status-badge--completed { background: var(--color-status-completed-bg); color: var(--color-status-completed-text); }
.status-badge--cancelled { background: var(--color-status-cancelled-bg); color: var(--color-status-cancelled-text); }

/* Grade Badge */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.5rem;
  padding: 0 var(--spacing-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.grade-badge--A_PLUS { background: var(--color-grade-aplus-bg); color: var(--color-grade-aplus-text); }
.grade-badge--A { background: var(--color-grade-a-bg); color: var(--color-grade-a-text); }
.grade-badge--B_PLUS { background: var(--color-grade-bplus-bg); color: var(--color-grade-bplus-text); }
.grade-badge--B { background: var(--color-grade-b-bg); color: var(--color-grade-b-text); }
.grade-badge--T { background: var(--color-grade-t-bg); color: var(--color-grade-t-text); }
.grade-badge--W { background: var(--color-grade-w-bg); color: var(--color-grade-w-text); }
.grade-badge--X { background: var(--color-grade-x-bg); color: var(--color-grade-x-text); }

/* Property Cards */
.host-property-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.host-property-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-4);
}

.host-property-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.host-property-card__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.host-property-card__meta {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-4);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Room List */
.host-rooms {
  margin-top: var(--spacing-4);
}

.host-rooms__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-3);
}

.host-rooms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-3);
}

.host-room-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  font-size: var(--text-sm);
}

.host-room-card__number {
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
}

.host-room-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}

.host-room-card__amenity {
  background: var(--color-amenity-bg);
  color: var(--color-amenity-text);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
}

/* Price Tiers */
.host-pricing {
  margin-top: var(--spacing-4);
}

.host-pricing__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-3);
}

.host-pricing__table {
  width: 100%;
  border-collapse: collapse;
}

.host-pricing__table th,
.host-pricing__table td {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
}

.host-pricing__table th {
  background: var(--color-bg-light);
  font-weight: var(--font-semibold);
}

/* Action Buttons */
.host-action-btn {
  padding: var(--spacing-1) var(--spacing-3);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.host-action-btn:hover { opacity: 0.8; }

.host-action-btn--confirm {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.host-action-btn--complete {
  background: var(--color-success);
  color: var(--color-text-white);
}

/* Empty State */
.host-empty {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-4);
  color: var(--color-text-light);
}

/* Loading */
.host-loading {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-text-light);
}

/* Pagination */
.host-pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-6);
}

.host-pagination__btn {
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast);
}

.host-pagination__btn:hover { background: var(--color-bg-light); }
.host-pagination__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Responsive */
@media (max-width: 768px) {
  .host-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .host-booking-table {
    display: block;
    overflow-x: auto;
  }

  .host-tabs__btn {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-xs);
  }

  .host-dashboard__header {
    flex-direction: column;
    gap: var(--spacing-2);
  }
}

/* ===== Invitations 서브탭 ===== */
.host-invitations__subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-4);
}

.host-invitations__subtab {
  padding: var(--spacing-2) var(--spacing-5);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.host-invitations__subtab:hover {
  color: var(--color-text-primary);
}

.host-invitations__subtab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.host-action-btn--cancel {
  background: var(--color-danger);
  color: var(--color-text-white);
  border: none;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.host-action-btn--cancel:hover {
  background: var(--color-danger-hover);
}

.status-badge--accepted { background: var(--color-status-accepted-bg); color: var(--color-status-accepted-text); }
.status-badge--rejected { background: var(--color-status-rejected-bg); color: var(--color-status-rejected-text); }
.status-badge--expired { background: var(--color-status-expired-bg); color: var(--color-status-expired-text); }