/* ═══════════════════════════════════════════════════════════════════════════
   FRBTP — Dashboard Annonceur CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout Auth ─────────────────────────────────────────────────────────── */
.frbtp-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--frbtp-gray-50);
  padding: var(--space-8);
}
.frbtp-auth-card {
  background: var(--frbtp-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-10);
  width: 100%;
  max-width: 480px;
}
.frbtp-auth-card__logo {
  text-align: center;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--frbtp-primary);
}
.frbtp-auth-card__title {
  font-size: var(--font-size-2xl);
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--frbtp-secondary);
}
.frbtp-auth-card__switch {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--frbtp-text-muted);
  margin-top: var(--space-5);
}

/* ── Dashboard Layout ────────────────────────────────────────────────────── */
.frbtp-annonceur-wrap {
  min-height: 100vh;
}
.frbtp-dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.frbtp-dashboard__sidebar {
  background: var(--frbtp-secondary);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.frbtp-dashboard__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: var(--space-4);
}
.frbtp-dashboard__avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--frbtp-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--font-size-lg);
  color: #fff;
  flex-shrink: 0;
}
.frbtp-dashboard__user strong { display: block; font-size: var(--font-size-sm); }
.frbtp-dashboard__user small  { font-size: var(--font-size-xs); opacity: .65; }

.frbtp-dashboard__nav { flex: 1; padding: 0 var(--space-3); }
.frbtp-dashboard__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,.75);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--transition);
  margin-bottom: var(--space-1);
  text-decoration: none;
}
.frbtp-dashboard__nav-item:hover,
.frbtp-dashboard__nav-item.active {
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
}
.frbtp-dashboard__nav-item.active {
  background: var(--frbtp-primary);
  color: #fff;
}
.frbtp-dashboard__nav-icon { font-size: var(--font-size-md); width: 20px; text-align: center; }

.frbtp-dashboard__logout {
  padding: var(--space-6) var(--space-6) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: var(--space-4);
}
.frbtp-link-muted {
  color: rgba(255,255,255,.5);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.frbtp-link-muted:hover { color: var(--frbtp-danger); text-decoration: none; }

/* ── Dashboard Main ──────────────────────────────────────────────────────── */
.frbtp-dashboard__main {
  background: var(--frbtp-gray-50);
  padding: var(--space-8);
  min-width: 0;
}
.frbtp-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.frbtp-dashboard__header h1 { font-size: var(--font-size-3xl); color: var(--frbtp-secondary); }

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.frbtp-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.frbtp-kpi-card {
  background: var(--frbtp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--frbtp-gray-100);
}
.frbtp-kpi-card__label { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-2); }
.frbtp-kpi-card__value { font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 800; color: var(--frbtp-secondary); }
.frbtp-kpi-card__delta { font-size: var(--font-size-xs); margin-top: var(--space-1); }
.frbtp-kpi-card__delta--up   { color: var(--frbtp-success); }
.frbtp-kpi-card__delta--down { color: var(--frbtp-danger); }

@media (max-width: 1199px) { .frbtp-dashboard__kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .frbtp-dashboard__kpis { grid-template-columns: 1fr; } }

/* ── Chart section ───────────────────────────────────────────────────────── */
.frbtp-dashboard__chart-section {
  background: var(--frbtp-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--frbtp-gray-100);
  margin-bottom: var(--space-8);
}
.frbtp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}
.frbtp-chart-header h2 { font-size: var(--font-size-lg); }
.frbtp-period-tabs { display: flex; gap: var(--space-2); }
.frbtp-period-tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--frbtp-gray-200);
  background: transparent;
  font-size: var(--font-size-sm);
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition);
}
.frbtp-period-tab.active,
.frbtp-period-tab:hover {
  background: var(--frbtp-primary);
  border-color: var(--frbtp-primary);
  color: #fff;
}

/* ── Notifications ───────────────────────────────────────────────────────── */
.frbtp-notif-list { display: flex; flex-direction: column; gap: var(--space-3); }
.frbtp-notif-item {
  padding: var(--space-4);
  background: var(--frbtp-white);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--frbtp-gray-200);
  font-size: var(--font-size-sm);
}
.frbtp-notif-item--unread { border-left-color: var(--frbtp-primary); }
.frbtp-notif-item time { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); display: block; margin-top: var(--space-1); }

/* ── Annonces list (dashboard) ───────────────────────────────────────────── */
.frbtp-annonces-filters { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.frbtp-annonces-list { display: flex; flex-direction: column; gap: var(--space-3); }
.frbtp-annonce-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--frbtp-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--frbtp-gray-100);
}
.frbtp-annonce-row__type { flex-shrink: 0; width: 100px; font-size: var(--font-size-xs); color: var(--frbtp-text-muted); }
.frbtp-annonce-row__title { flex: 1; font-weight: 600; font-size: var(--font-size-sm); }
.frbtp-annonce-row__meta  { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); display: flex; gap: var(--space-3); }
.frbtp-annonce-row__actions { flex-shrink: 0; display: flex; gap: var(--space-2); }

/* ── Nouvelle annonce steps ──────────────────────────────────────────────── */
.frbtp-step { padding: var(--space-6); background: var(--frbtp-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
.frbtp-step--hidden { display: none; }
.frbtp-step__title { font-size: var(--font-size-xl); margin-bottom: var(--space-6); color: var(--frbtp-secondary); }
.frbtp-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.frbtp-type-card {
  border: 2px solid var(--frbtp-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: all var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  font-family: var(--font-sans);
}
.frbtp-type-card:hover,
.frbtp-type-card.selected {
  border-color: var(--frbtp-primary);
  background: rgba(4, 68, 155, .04);
}
.frbtp-type-card__icon { font-size: 2rem; }
.frbtp-type-card strong { font-size: var(--font-size-md); color: var(--frbtp-secondary); }
.frbtp-type-card small  { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); }

/* ── Pricing options ─────────────────────────────────────────────────────── */
.frbtp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.frbtp-pricing-card {
  border: 2px solid var(--frbtp-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition);
}
.frbtp-pricing-card:hover,
.frbtp-pricing-card.selected {
  border-color: var(--frbtp-primary);
  background: rgba(4, 68, 155, .04);
}
.frbtp-pricing-card__price { font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 800; color: var(--frbtp-primary); }
.frbtp-pricing-card__duration { font-size: var(--font-size-sm); color: var(--frbtp-text-muted); }
.frbtp-pricing-card__remise { font-size: var(--font-size-xs); color: var(--frbtp-success); font-weight: 600; background: #D1F2DF; padding: 2px 6px; border-radius: var(--radius-full); margin-top: var(--space-2); display: inline-block; }

/* ── Skeleton loaders ────────────────────────────────────────────────────── */
.frbtp-skeleton {
  background: linear-gradient(90deg, var(--frbtp-gray-100) 25%, var(--frbtp-gray-50) 50%, var(--frbtp-gray-100) 75%);
  background-size: 200% 100%;
  animation: frbtp-skeleton-pulse 1.5s infinite;
  border-radius: var(--radius-md);
  min-height: 80px;
}
.frbtp-skeleton--row { min-height: 56px; }
@keyframes frbtp-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Invoices table ──────────────────────────────────────────────────────── */
.frbtp-invoices-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--frbtp-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.frbtp-invoices-table th,
.frbtp-invoices-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--frbtp-gray-100); font-size: var(--font-size-sm); }
.frbtp-invoices-table th { background: var(--frbtp-gray-50); font-weight: 700; color: var(--frbtp-text-muted); text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: .05em; }
.frbtp-invoices-table tr:last-child td { border-bottom: none; }

/* ── Upload zone ─────────────────────────────────────────────────────────── */
.frbtp-upload-zone {
  border: 2px dashed var(--frbtp-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--frbtp-gray-50);
}
.frbtp-upload-zone:hover,
.frbtp-upload-zone.dragover {
  border-color: var(--frbtp-primary);
  background: rgba(4, 68, 155, .04);
}
.frbtp-upload-zone__icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
.frbtp-upload-zone__text { font-size: var(--font-size-sm); color: var(--frbtp-text-muted); }
.frbtp-upload-zone__hint { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); margin-top: var(--space-2); }
.frbtp-upload-preview { margin-top: var(--space-4); }
.frbtp-upload-preview img { max-height: 120px; border-radius: var(--radius-md); border: 1px solid var(--frbtp-gray-200); }
.frbtp-upload-error { color: var(--frbtp-danger); font-size: var(--font-size-sm); margin-top: var(--space-2); }

/* ── Responsive dashboard ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .frbtp-dashboard { grid-template-columns: 220px 1fr; }
}
@media (max-width: 767px) {
  .frbtp-dashboard { grid-template-columns: 1fr; }
  .frbtp-dashboard__sidebar {
    position: fixed;
    left: -260px;
    z-index: var(--z-sticky);
    transition: left var(--transition-slow);
    height: 100vh;
    width: 260px;
  }
  .frbtp-dashboard__sidebar.open { left: 0; }
  .frbtp-dashboard__main { padding: var(--space-5); }
  .frbtp-type-grid { grid-template-columns: 1fr; }
  .frbtp-pricing-grid { grid-template-columns: 1fr; }
}