/**
 * custom.css
 * Entspricht dem <style>-Block, der im Original in allen fünf
 * client.hicandidate.com-Seiten identisch enthalten war (Tabellen-Look,
 * KPI-Card-Hover, User-Icon, Card-Schatten, Buttons, Datumsbereich),
 * plus den kleinen Seiten-spezifischen Ergänzungen (hover_effect,
 * dt-responsive-Rahmen). Keine eigene Marken-/Akzentfarbe – reines
 * Original-Theme (#556ee6 / #34c38f), keine Design-Anpassungen ohne
 * vorherige Abstimmung.
 */

/* Modernize table design */
table.dataTable {
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
table.dataTable thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  border-bottom: 2px solid #dee2e6;
}
table.dataTable tbody tr:hover {
  background-color: #f1f3f5;
}

/* KPI Cards */
.kpi-card {
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.kpi-card .avatar-sm {
  background: linear-gradient(135deg, #556ee6, #34c38f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Top section styling */
.user_icon {
  font-size: 34px;
  border-radius: 50%;
  background-color: #f1f3f5;
  padding: 12px;
  color: #556ee6;
  border: none;
}
.card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Buttons */
.btn-light.dropdown-toggle {
  border-radius: 8px;
  border: 1px solid #ced4da;
  background-color: #fff;
}

/* Date range picker */
#daterange {
  border-radius: 8px;
  border: 1px solid #ced4da;
}

/* Jobs/Orders-Seiten */
.hover_effect:hover {
  background-color: lightgrey;
  cursor: pointer;
}
.dt-responsive td,
.dt-responsive th {
  border: 0 solid #eff2f7;
}

/* ── Bereichsumschalter (ATS | HiCandidate) ─────────────────────────────
   Neu in der Demo (im Original nicht vorhanden), da zwei Bausteine
   navigierbar sein müssen. Nutzt bewusst nur Theme-eigene Farben. */
.area-switcher {
  display: flex;
  gap: 2px;
  padding: 10px 14px 6px;
  margin-bottom: 4px;
}

.area-switcher__tab {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.area-switcher__tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.area-switcher__tab--active {
  color: #fff;
  background: #556ee6;
}

.area-switcher__tab--active:hover {
  color: #fff;
  background: #556ee6;
}

/* KPI-Sparkline-Kacheln auf dem Dashboard (neu, nutzt .card + .kpi-card) */
.kpi-card__sparkline {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 8px;
  height: 46px;
  overflow: hidden;
  opacity: 0.9;
}

.kpi-card__delta--up {
  color: #34c38f;
}

.kpi-card__delta--down {
  color: #f46a6a;
}

/* Job-Detail: Anzeigenvorschau-Karten (neu, keine echten Creative-URLs) */
.ad-preview {
  border: 1px solid #eff2f7;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.ad-preview__media {
  height: 120px;
  background: linear-gradient(135deg, #556ee6, #34c38f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ad-preview__body {
  padding: 12px 14px;
}

.ad-preview__headline {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.ad-preview__text {
  font-size: 0.8rem;
  color: #74788d;
  line-height: 1.5;
}

.ad-preview__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #556ee6;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Top-Performer-Liste (neu) */
.top-performer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #eff2f7;
}

.top-performer:last-child {
  border-bottom: none;
}

.top-performer__rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #556ee6;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top-performer__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #343a40;
}

.top-performer__meta {
  font-size: 0.78rem;
  color: #74788d;
}

.top-performer__value {
  margin-left: auto;
  font-weight: 700;
  color: #343a40;
  white-space: nowrap;
}