/* =========================================================================
 * T-Cashflow V3.76 — Incentive Tab CSS
 * ========================================================================= */

.tci-wrap { padding: 12px 0; }

/* ---------- Period picker ---------- */
.tci-picker {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tci-picker label { font-size: 13px; color: #5F5E5A; font-weight: 500; }
.tci-select {
  padding: 5px 10px;
  border: 1px solid #d0d7de;
  border-radius: 5px;
  font-size: 13px;
  background: white;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}
.tci-select:focus { border-color: #185FA5; }
.tci-period-label {
  margin-left: auto;
  background: #FBEAF0;
  color: #993556;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* ---------- Card ---------- */
.tci-card {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.tci-card-title {
  background: #FBEAF0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #993556;
  border-bottom: 1px solid #f4c0d1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tci-card.tci-warn {
  background: #FEF3D4;
  color: #854F0B;
  padding: 14px;
  border-color: #fac775;
}

.tci-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 400;
}
.tci-tag.draft     { background: #fef3d4; color: #854F0B; }
.tci-tag.finalized { background: #d4f4e8; color: #0F6E56; }

/* ---------- Empty / help ---------- */
.tci-empty {
  text-align: center;
  padding: 30px 20px;
  color: #5F5E5A;
}
.tci-empty-sm {
  text-align: center;
  padding: 20px;
  color: #888;
  font-size: 13px;
}
.tci-help {
  margin-top: 14px;
  font-size: 11.5px;
  color: #5F5E5A;
  line-height: 1.6;
  background: #f6f8fa;
  padding: 10px 14px;
  border-radius: 4px;
  display: inline-block;
}

/* ---------- Tier grid (visualization) ---------- */
.tci-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
}
.tci-tier {
  background: #fafbfc;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px;
}
.tci-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.tci-tier-label {
  font-size: 12px;
  font-weight: 500;
  color: #2d2c2a;
}
.tci-tier-rate {
  font-size: 16px;
  font-weight: 600;
  color: #993556;
}
.tci-tier-range {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}
.tci-tier-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tci-tier-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4537E 0%, #993556 100%);
  border-radius: 3px;
  transition: width 0.3s;
}
.tci-tier-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #5F5E5A;
}
.tci-tier-inc {
  color: #0F6E56;
  font-weight: 500;
}

.tci-calc-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fef9fb;
  border-top: 1px solid #f4c0d1;
  font-size: 13px;
  flex-wrap: wrap;
}
.tci-calc-summary b { font-weight: 600; color: #2d2c2a; }
.tci-arrow { color: #888; font-size: 16px; }
.tci-total { 
  color: #993556; 
  font-size: 14px;
}
.tci-total b { color: #993556; font-size: 16px; }

/* ---------- Actions ---------- */
.tci-actions {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.tci-mode-group { display: flex; align-items: center; gap: 6px; }
.tci-mode-group label { font-size: 12px; color: #5F5E5A; font-weight: 500; }
.tci-mode-btn {
  padding: 5px 12px;
  border: 1px solid #d0d7de;
  background: white;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #5F5E5A;
  font-family: inherit;
}
.tci-mode-btn:hover:not(:disabled) { background: #f3f4f6; }
.tci-mode-btn.active {
  background: #993556;
  color: white;
  border-color: #993556;
  font-weight: 500;
}
.tci-mode-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tci-act-right {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.tci-btn, .tci-btn-primary {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #d0d7de;
  background: white;
  color: #2d2c2a;
  font-family: inherit;
}
.tci-btn:hover { background: #f3f4f6; }
.tci-btn-primary {
  background: #993556;
  color: white;
  border-color: #993556;
  font-weight: 500;
}
.tci-btn-primary:hover { background: #72243E; }

/* ---------- Summary ---------- */
.tci-sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: #fafbfc;
  border-bottom: 1px solid #f0f0f0;
}
.tci-sum-item {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.tci-sum-item .lbl { font-size: 11px; color: #888; margin-bottom: 4px; }
.tci-sum-item .val { font-size: 18px; font-weight: 600; color: #2d2c2a; }
.tci-sum-item.highlight {
  background: #FBEAF0;
  border-color: #f4c0d1;
}
.tci-sum-item.highlight .val { color: #993556; }
.tci-sum-item.highlight .lbl { color: #72243E; }

/* ---------- Tables ---------- */
.tci-table-wrap { overflow-x: auto; }
.tci-table-sm, .tci-dist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tci-table-sm thead, .tci-dist-table thead { background: #fafbfc; }
.tci-table-sm th, .tci-dist-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 500;
  color: #5F5E5A;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}
.tci-table-sm td, .tci-dist-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.tci-table-sm .num, .tci-dist-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tci-inc { color: #993556; }
.tci-sub { font-size: 11px; color: #888; margin-top: 2px; }

.tci-dist-table tfoot td {
  background: #FBEAF0;
  border-top: 2px solid #993556;
  border-bottom: none;
  padding: 10px;
}

.tci-pct-input, .tci-amt-input {
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  font-size: 12px;
  text-align: right;
  outline: none;
  font-family: inherit;
}
.tci-pct-input { width: 70px; }
.tci-amt-input { width: 100px; }
.tci-pct-input:focus, .tci-amt-input:focus { border-color: #993556; }

/* ---------- Add employee ---------- */
.tci-add-emp {
  padding: 14px;
  background: #fafbfc;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tci-add-emp label { font-size: 12px; font-weight: 500; color: #5F5E5A; }

@media (max-width: 768px) {
  .tci-sum { grid-template-columns: repeat(2, 1fr); }
  .tci-actions { flex-direction: column; align-items: stretch; }
  .tci-act-right { margin-left: 0; }
}