/* ILX Pro Tracker - Styles */
:root {
  --ilx-primary: #0b4f7a; /* deep blue */
  --ilx-accent: #27b5ff; /* bright accent */
  --ilx-green: #1dbf73; /* success */
  --ilx-muted: #7c8a99;
  --ilx-bg: #f9fbfc;
}

/* Admin tables and pages */
.ilx-pro-table th,
.ilx-pro-table td {
  padding: 8px;
}

/* Front‑end wrapper */
.ilx-tracker-wrap {
  font-family: inherit;
  background: var(--ilx-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
}
.ilx-tracker-form label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.ilx-form-row {
  display: flex;
  gap: 10px;
}
.ilx-input {
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 2px solid #d8e3ee;
  border-radius: 12px;
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.ilx-input:focus {
  border-color: var(--ilx-accent);
  box-shadow: 0 0 0 3px rgba(39, 181, 255, .2);
  outline: none;
}
.ilx-btn {
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(90deg, var(--ilx-primary), var(--ilx-accent));
  transition: filter .2s;
}
.ilx-btn:hover {
  filter: brightness(1.1);
}
.ilx-msg {
  margin-top: 8px;
  color: #c00;
}

/* Tracker result container */
.ilx-tracker-result {
  margin-top: 20px;
}

/* Stage bar */
.ilx-stages {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ilx-stage {
  flex: 1 1 20%;
  background: #ffffff;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.ilx-stage.current {
  border-color: var(--ilx-primary);
  box-shadow: 0 0 0 1px var(--ilx-primary);
}
.ilx-stage.completed {
  border-color: var(--ilx-green);
  box-shadow: 0 0 0 1px var(--ilx-green);
}
.ilx-stage .ilx-ico svg {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}
.ilx-stage.completed .ilx-ico svg { color: var(--ilx-green); }
.ilx-stage.current .ilx-ico svg { color: var(--ilx-primary); }
.ilx-stage .ilx-ico svg { color: var(--ilx-muted); }
.ilx-stage .ilx-lbl {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}
.ilx-stage .ilx-sub {
  font-size: 12px;
  color: var(--ilx-muted);
}

/* Progress bar (thin) */
.ilx-bar {
  height: 6px;
  background: #e8eef4;
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 0;
}
.ilx-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ilx-primary), var(--ilx-accent));
  transition: width .35s ease;
}

/* Meta chips */
.ilx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ilx-pill {
  background: #f3f7fb;
  border: 1px solid #e1e8f0;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.ilx-pill .ilx-k {
  font-weight: 600;
  margin-right: 4px;
}

/* Timeline cards */
.ilx-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ilx-card {
  background: #ffffff;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  padding: 12px 16px;
}
.ilx-card .ilx-date {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ilx-primary);
}
.ilx-card .ilx-title {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 16px;
}
.ilx-card .ilx-loc {
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--ilx-muted);
}
.ilx-card .ilx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ilx-card .ilx-chip {
  background: #f3f7fb;
  border: 1px solid #e1e8f0;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
}